<template>
  <q-page class="column">
    <q-inner-loading visible v-if="model.noticeId < 0">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
      <b class="text-primary">数据加载中...</b>
    </q-inner-loading> 

    <!-- create new -->
    <div v-if="model.noticeId>=0">
      <q-list class="sms col q-py-none" no-border v-if="model.noticeId>=0">
        <q-list-header>短信标题</q-list-header>
        <q-item>
          <q-input class="full-width" hide-underline v-model="model.title" placeholder="便于快速识别短信内容" />
        </q-item>

        <q-list-header class="row">
          <span class="col">短信CODE</span>
          <small class="col-auto text-primary">(形如：SMS_123456)</small>
        </q-list-header>
        <q-item>
          <q-input class="full-width" hide-underline v-model="model.config" placeholder="提交阿里云后得到的编码，如：SMS_123456" />
        </q-item>

        <q-list-header>发送渠道</q-list-header>
        <q-item>
          <q-radio style="margin-right:20px;" v-model="model.channel" val="ALIYUN" label="阿里云" />
          <q-radio style="margin-right:20px;" v-model="model.channel" val="ALIYUN_OLD" label="阿里云(旧)" />
          <q-radio style="margin-right:20px;" v-model="model.channel" val="QCLOUD" label="腾讯云" />
        </q-item>

        <q-list-header>短信内容</q-list-header>
        <q-item>
          <q-input class="full-width" type="textarea" rows="3" :max-height="75" hide-underline 
              v-model="model.content" placeholder="需发送的短信内容(模板)" />
        </q-item>

        <q-list-header class="row">
          <span class="col">手机号</span>
          <small class="col-auto text-primary">(建议直接复制Excel表中的对应数据列)</small>
        </q-list-header>
        <q-item>
          <q-input class="full-width" type="textarea" rows="3" :max-height="75" hide-underline
              placeholder="中奖用户手机号，每行一条手机号"
              v-model="model.userIds"/>
        </q-item>

        <template v-if="paramNames.length > 0">
          <div v-for="(item,idx) in paramNames" :key="'pn'+item">
            <q-list-header class="row">
              <span class="col">短信参数【{{item}}】</span>
              <small class="col-auto text-secondary">(建议直接复制Excel表中的对应数据列)</small>
            </q-list-header>
            <q-item>
              <q-input class="full-width" type="textarea" rows="3" :max-height="75" hide-underline 
                  v-model="model.params[idx]" placeholder="每行一条内容，与手机号一一对应" />
            </q-item>
          </div>
        </template>
      </q-list>
    </div>

    <!-- save -->
    <q-btn color="primary" class="fixed" label="保存" icon="mdi-content-save"
        style="right: 15px; bottom: 15px"
        v-if="model.noticeId>=0" :loading="loading" @click="save" />
  </q-page>
</template>

<script>
export default {
  name: 'PageSmsCodeEdit',
  data() {
    return {
      loading: false,
      model : {
        noticeId : -1,
        title: '',
        content: '',
        userIds: '',
        params:[],
        channel: 'ALIYUN'
      }
    }
  },
  mounted() {
    let me = this;
    me.loadModel(this.$route.params.id);
    this.$api.ui.pageBackBtn = function(){
      if(me.model.noticeId > 0) {
        me.$router.push('/sms-code/view/' + me.model.noticeId);
      } else {
        me.$router.push('/sms-code');
      }
    }
  },
  methods: {
    loadModel(id) {
      let me = this;
      if(id <= 0) {
        this.model = { noticeId : 0, title: '', content: '', userIds: '', params:[], channel: 'ALIYUN'  }
      } else {
        this.$api.notice.loadOne(id, res=>{
          me.model = res.data.model;
        });
      }
    },
    save() {
      //console.log(this.model.params);return;
      let me = this;
      this.loading = true;
      this.$api.notice.saveSmsCode(this.model, res=>{
        let id = res.data.model.noticeId;
        me.$q.notify({
          message: '保存成功',
          type: 'positive',
          color: 'positive',
          icon: 'mdi-check'
        });
        me.$router.push('/sms-code/view/' + id);
      }, err=>{
        this.loading = false;
      });
    }
  },
  computed: {
    paramNames() {
      let tmpl = this.model.content;
      let array = tmpl.split('${');
      let size = array.length;
      if(size == 1) {
        // 无参数
        return [];
      } else {
        try {
          let names = [];
          for(let i = 1; i < size; i++) {
            names.push(array[i].substring(0, array[i].indexOf('}')));
          }
          return names;
        } catch {
          return [];
        }
      }
    }
  }
}
</script>

<style>
div.sms .q-list-header {
  background-color: #eee;
  padding: 15px 10px 3px 10px;
  min-height: 30px;
}
</style>


